<template>

<div class="box">
    <el-empty style="width: 100%;" description="暂无数据" v-if="data.tableData.length === 0" />
    <div style="flex:1">
        <el-card class="list-box" shadow="hover" style="margin-bottom: 10px" v-for="(item,i) in data.tableData" :key="item.id">
            <img style="width:500px;height: 200px;margin-right: 20px;"  :src="imgList[i%5]" alt=""/>
            <div class="box-card list-item">
                <h4>公告标题：{{ item.title }}</h4>
                <div>公告内容：{{ item.content}}</div>
            </div>
        </el-card>
    </div>
</div>

    <!-- <el-card>
      <el-table :data="data.tableData" stripe @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"/>
        <el-table-column label="公告标题" prop="title"/>
        <el-table-column label="公告内容" prop="content"/>
  
        <el-table-column label="操作">
          <template #default="scope">
            <el-button @click="handleUpdate(scope.row)" type="primary" :icon="Edit" circle></el-button>
            <el-button @click="handleDelete(scope.row.id)" type="warning" :icon="Delete" circle></el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 25px">
        <el-pagination
            @size-change="load"
            @current-change="load"
            v-model:current-page="data.currentPage"
            v-model:page-size="data.pageSize"
            :page-sizes="[5, 10, 15, 20]"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="data.total"
        />
      </div>
    </el-card> -->
  </template>
  
  <script setup>
  import {reactive} from "vue";
  import {Delete, Edit, Search} from "@element-plus/icons-vue";
  import request from "@/utils/request.js";
  import {ElMessage, ElMessageBox} from "element-plus";
  import img1 from '@/assets/01.jpeg'
  import img2 from '@/assets/02.jpeg'
  import img3 from '@/assets/03.jpeg'
  import img4 from '@/assets/04.jpeg'
  import img5 from '@/assets/05.jpeg'
const imgList = [img1,img2,img3,img4,img5]
  
  const data = reactive({
    title: '',
    fileName: '',
    content: '',
    form: {},
    tableData: [],
    currentPage: 1,
    pageSize: 999,
    total: 0,
    FormVisible: false,
    ids: [],
  })
  
  const loadByName =()=> {
    // 点击查询时重置到第一页
    data.currentPage = 1
  
    request.get('/notice/selectPage', {
      params: {
        pageNum: data.currentPage,
        pageSize: data.pageSize,
        role: 'PARTICIPANT',
        title: data.title.trim(), // 传递查询参数
      }
    }).then(res => {
      data.tableData = res.data.list
      data.total = res.data.total
    })
  }
  
  const load = () => {
    request.get('/notice/selectPage', {
      params: {
        pageNum: data.currentPage,
        pageSize: data.pageSize,
      }
    }).then(res => {
      data.tableData = res.data.list;
      data.total = res.data.total;
    })
  
  }
  
  load()
  
  const reset = () => {
    data.title = '';
    load()
  }
  
  //新增
  const hadleNewracer = () => {
    data.FormVisible = true;
    data.form = {};//新增时清空表单，防止上一次数据残留
  }
  
  // 新增 和 保存信息
  const save = () => {
    data.form.id ? update() : add()//id有值跟新，无添加
  }
  
  const add = () => {
    request.post("/notice/add", data.form).then(res => {
      if (res.code === '200') {
        ElMessage.success("操作成功")
        data.FormVisible = false; //添加后 关闭对话框
        load()
      } else {
        ElMessage.error(res.msg)
      }
  
    })
  }
  
  const update = () => {
  
    request.put("/notice/update", data.form).then(res => {
      if (res.code === '200') {
        ElMessage.success("操作成功")
        data.FormVisible = false; //更新后 关闭对话框
        load()
      } else {
        ElMessage.error(res.msg)
      }
  
    })
  }
  
  
  // 数据编辑
  const handleUpdate = (row) => {
    data.form = JSON.parse(JSON.stringify(row))//深拷贝，不直接data.from=row,此时会直接修改
    data.FormVisible = true
  }
  
  // 数据删除
  const handleDelete = (id) => {///eventCategory/delEventCategory
    ElMessageBox.confirm('您确认删除', '删除确认', {type: "warning"}).then(() => {
      request.delete("/notice/" + id).then(res => {
        if (res.code === '200') {
          ElMessage.success("操作成功")
          data.FormVisible = false; //删除后 关闭对话框
          load()
        } else {
          ElMessage.error(res.msg)
        }
  
      })
    }).catch()
  
  }
  
  const handleSelectionChange = (rows) => {//返回所有选中的行对象数组
  
    //从选中行数组里的里面取出所有行的id组成一个新的数组
    data.ids = rows.map(row => row.id)
    console.log(data.ids)
  }
  
  const deleteBatch = () => {
    if (data.ids.length === 0) {
      ElMessage.warning('请选择数据')
      return
    }
    ElMessageBox.confirm('您确认删除', '删除确认', {type: "warning"}).then(() => {///eventCategory/delEventCategoryBaTch
      request.delete('/notice/batch', {data: data.ids}).then(res => {
        if (res.code === '200') {
          ElMessage.success("操作成功")
          data.FormVisible = false; //删除后 关闭对话框
          load()
        } else {
          ElMessage.error(res.msg)
        }
      })
    }).catch()
  
  }
  
  </script>
  
  <style scoped>
  ::v-deep .el-card__body{
    display: flex !important;
  }
  </style>
  